<template>
    <div class="quickInsert">
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <span>预处理参数</span>
                <i class="el-icon-arrow-down" @click="CustomOptionState = !CustomOptionState"
                    :style="{'transform': CustomOptionState ? 'rotateZ(0deg)' : 'rotateZ(-90deg)'}"></i>
            </div>
            <el-collapse-transition>
                <div class="quickInsert-content" v-if="CustomOptionState">
                    <div class="listItem" v-for="(item,index) in options" :key="index">
                        <el-link type="primary" @click="quickInsert(item.str, 'value')">{{item.name}}</el-link>
                    </div>
                </div>
            </el-collapse-transition>
        </div>
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <span>全局方法</span>
                <i class="el-icon-setting" @click="showCustomKeyEditor('fun')"></i>
                <i class="el-icon-arrow-down" @click="CustomFunState = !CustomFunState"
                    :style="{'transform': CustomFunState ? 'rotateZ(0deg)' : 'rotateZ(-90deg)'}"></i>
            </div>
            <el-collapse-transition>
                <div class="quickInsert-content" v-if="CustomFunState">
                    <div class="listItem" v-for="(item,index) in funArray" :key="index">
                        <el-link type="primary" @click="quickInsert(item.str, 'function')">{{item.str}}</el-link>
                    </div>
                </div>
            </el-collapse-transition>
        </div>
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <span>全局缓存</span>
                <i class="el-icon-setting" @click="showCustomKeyEditor('cache')"></i>
                <i class="el-icon-arrow-down" @click="CustomCacheState = !CustomCacheState"
                    :style="{'transform': CustomCacheState ? 'rotateZ(0deg)' : 'rotateZ(-90deg)'}"></i>
            </div>
            <el-collapse-transition>
                <div class="quickInsert-content" v-if="CustomCacheState">
                    <div class="listItem" v-for="(item,key) in cacheObj" :key="key">
                        <el-link type="primary" @click="quickInsert(key,'cache')">{{key}}
                        </el-link>
                    </div>
                </div>
            </el-collapse-transition>
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        props: ['editor'],
        data() {
            return {
                options: [{
                    str: 'res.url;',
                    name: 'URL',
                }, {
                    str: 'res.header[""];',
                    name: '头部',
                }, {
                    str: 'res.query[""];',
                    name: 'query参数',
                }, {
                    str: 'res.body[""];',
                    name: '请求参数',
                }, {
                    str: 'res.rest[""];',
                    name: 'url截取参数',
                }],
                CustomOptionState: false,
                CustomCacheState: false,
                CustomFunState: false,
            }
        },
        computed: {
            ...mapState("cache", {
                cacheObj: state => state.cacheObj,
            }),
            ...mapState("fun", {
                funArray: state => state.funArray,
            }),
        },
        methods: {
            showCustomKeyEditor(type) {
                this.$store.dispatch('customKey/showCustomDrawer', {
                    activeObj: this.editor,
                    type: type
                });
            },
            quickInsert(str, type) {
                if (type == 'key') {
                    var text = this.editor.getValue();
                    if (!text) {
                        var _str = `    '${str}' : '',`;
                        this.editor.replaceSelection(`{\n${_str}\n}`);
                        this.editor.setCursor(1, _str.length - 2);
                    } else {
                        var position = this.editor.getCursor();
                        var _str = `    '${str}' : '',`;
                        var oldLine = this.editor.getLine(position.line);
                        this.editor.setCursor(position.line, position.ch + oldLine.length);
                        this.editor.replaceSelection('\n' + _str);
                        this.editor.setCursor(position.line + 1, _str.length - 2);
                    };
                } else if (type == 'function') {
                    var position = this.editor.getCursor();
                    this.editor.setSelection({ line: position.line, ch: position.ch - 1 }, { line: position.line, ch: position.ch + 1 });
                    var __str = this.editor.getSelection();
                    if (__str == '\'\'' || __str == '\"\"') {
                        this.editor.replaceSelection(str);
                    } else {
                        this.editor.setCursor(position);
                        this.editor.replaceSelection(str);
                    }
                } else if (type == "cache") {
                    str = 'getCache(\'' + str + '\')';
                    var position = this.editor.getCursor();
                    this.editor.setSelection({ line: position.line, ch: position.ch - 1 }, { line: position.line, ch: position.ch + 1 });
                    var __str = this.editor.getSelection();
                    if (__str == '\'\'' || __str == '\"\"') {
                        this.editor.replaceSelection(str);
                    } else {
                        this.editor.setCursor(position);
                        this.editor.replaceSelection(str);
                    };
                } else {
                    this.editor.replaceSelection(str);
                };
                this.editor.focus();
            },
        },
    }

</script>